<!--
 - Copyright 2022. Huawei Technologies Co., Ltd. All rights reserved.

 - Licensed under the Apache License, Version 2.0 (the "License");
 - you may not use this file except in compliance with the License.
 - You may obtain a copy of the License at

 -   http://www.apache.org/licenses/LICENSE-2.0

 - Unless required by applicable law or agreed to in writing, software
 - distributed under the License is distributed on an "AS IS" BASIS,
 - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 - See the License for the specific language governing permissions and
 - limitations under the License.
 -->

<!-- title栏 -->
<template>
    <div class="head_container" :style="positionStyle">
        <div class="left" @click="backClick">
            <img class="icon" :src="backIcon" >
        </div>
        <div class="head_name" :class="{'rtl-l text-r': $rtl}">{{ headName }}</div>
        <!-- <div
            class="right"
            v-if="setBtn"
            @click.stop="showGears=!showGears"
        >
            <img class="icon" :src="setIcon" >
        </div>
        <SelectModule 
            :showGears="showGears"
            v-model="showGears"
            :optionList="optionList"
            :selectStyle="selectStyle"
            @choose='choose'
            :setBtn="setBtn"
        /> -->
    </div>
</template>
<script>
import SelectModule from "@/components/SelectModule.vue";
export default {
    components: {
        SelectModule
    },
    data() {
        return {
            positionStyle:{ //适配状态栏高度
                position: 'fixed',
                top: window.topHeight+'px',
                left: 0
            },
            showGears: false,
            optionList: [
                {
                    value: this.$t('BDT_fascialgun_del_device'),
                    actived: false
                },{
                    value: this.$t('BDT_fascialgun_firmware_upgrade'),
                    actived: false
                },{
                    value: this.$t('BDT_fascialgun_massage_records'),
                    actived: false
                }
            ],
            selectStyle:{
                top: '5.6rem',
                width: '15.6rem',
                right: '2.4rem',
                background: window.isDark ? '#202224' : '#FFFFFF',
            },
            backIcon: window.isDark ? require('@/assets/image/icon/dark_back.png') : require('@/assets/image/icon/back.png'),
            setIcon: window.isDark ? require('@/assets/image/dark/ic_operate_dark.png') : require('@/assets/image/ic_operate.png')
        };
    },
    props: {
        // 标题
        headName: {
            type: String,
        },
        //是否显示右上角按钮
        setBtn: {
            type: Boolean,
            default: false
        }
    },
    methods:{
        backClick(){
            this.$emit('backClick'); //暴露返回方法，引用页决定返回地址
        },

        /**
         * i为选择的optionList下标，根据对应选项添加相关方法
        */
        choose(i){
            switch(i) {
                case 0:
                    this.$emit('deleteDevice');
                    break;
                case 1:
                    this.$router.push('/upgrade');
                    break;
                case 2:
                    this.$router.push('/massageRecords');
                    break
            }
        }
    }
};
</script>
<style scoped>
    .head_container{
        display: flex;
        align-items: center;
        padding: 0 1.5rem;
        height: 5.6rem;
        opacity: 1;
        background-color: var(--bg-color) !important;
        z-index: 10;
        width: 100%;
    }

    .left, .right{
        width: 4rem;
        min-width: 4rem;
        height: 4rem;
        min-height: 4rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .head_name{
        width: 100%;
        font-size: 2rem;
        font-family: HarmonyOS_Sans_SC_Medium;
        padding-left:.8rem;
    }

    .icon{
        width: 100%;
        height: 100%;
    }
</style>